<template>
    <!-- 面包屑 -->
    <div class="bread">
         <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>学员信息管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- 搜索模块 -->
    <div class="search">
         <el-select
        v-model="searchKey"
        filterable
        remote
        reserve-keyword
        placeholder="请输入您要查找的内容"
        loading-text="正在加载..."
        no-match-text="查询不到数据"
        no-data-text="没有数据"
        remote-show-suffix
        :remote-method="handleSearch"
        :loading="loading"
        default-first-option
        @foucus="handleFocus"
        @change="searchChange"
      >
        <el-option
          v-for="item in searchOptions"
          :key="item"
          :value="item"
        />
      </el-select>
    </div>
    <!-- 导出excel -->
    <div class="export-excel">
        <el-button type="primary">导出excel</el-button>
     </div>
     <!-- 表格模块 -->
     <div class="dataTable" >
        <el-table :data="stuListData" border  style="width: 100%"
            element-loading-background="rgba(122, 122, 122, 0.3)"
                  element-loading-text="正在加载"
                  v-loading="stuLoading"
        >
            <el-table-column align = "center" prop="headeimgurl" label="头像" width="120">
                <template #default="{row,$index}"> 
                    <el-image 
                        style="width: 80px; height: 80px"
                        :src="previewImgList[$index]"
                        :zoom-rate="1.2"
                        :preview-src-list="previewImgList"
                        :initial-index="$index"
                        fit="cover"
                        shape="square"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column align = "center" prop="name" label="姓名" width="120" />
            <el-table-column align = "center" prop="class" label="班级" width="100px"/>
            <el-table-column align = "center" prop="degree" label="学历" width="120px" />
            <el-table-column align = "center" prop="productUrl" label="项目" width="120px"/>
            <el-table-column align = "center" prop="cTime" label="创建时间" />
            <el-table-column  align = "center" label="操作" >
                <el-button type="success">查看</el-button>
                <el-button type="primary">编辑</el-button>
                <el-button type="danger">删除</el-button>
            </el-table-column>
        </el-table>
     </div>
    <!-- 分页器 -->
    <div class="pagenation">
        <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import {onMounted,watch} from 'vue'
//引入api接口
import api from '@/api/stu.js'
let loading = ref(false)
let searchOptions = ref([])

// 封装一个搜索的方法(input框输入内容搜索)
let searchList = async (key='',isSelect=false)=>{
    //打开loading
    isSelect && (stuLoading.value=true)
    loading.value = true
    try {
        let res = await api.searchStuApi({key})
        console.log(res)
        searchOptions.value = Array.from(new Set(res.data.data.map(item=>item.name)))
        loading.value = false

        //关闭loading
        loading.value=false
        // 更新表格数据
        isSelect && (stuListData.value = res.data.data) && stuLoading.value
    } catch (error) {
        console.log(error)
        loading.value = false
    }
}
//搜索的关键字
let searchKey = ref('')
//控制表格加载动画的显示与隐藏
let stuLoading = ref(false)
//搜索框获得焦点时,清掉之前模糊搜索填充的数据
const handleFocus = ()=>{
    searchOptions.value = []
}
//搜索选择器选择内容时,触发的change事件
const searchChange = (key)=>{
    searchList(key,true)
}

//触发远程方法
const handleSearch = (value) => {
  value && searchList(value)
  
}
//-------------------------------------------------------------------------------------
//表格数据
const stuListData = ref([])
// 声明表格参数
let fetchTableListParam = {
    page:1,
    count:10,
    class:'',
}
//表格图片数据
const previewImgList = ref([])
// 监听表格数据的变化,当表格数据发生变化时,将图片数据提取出来组成新数组,利用遍历数组的方法展示数据
watch(stuListData,(newVal)=>{
    previewImgList.value = newVal.map(item=>item.headimgurl ? item.headimgurl:'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png')
    console.log(previewImgList)
})

//封装一个获取表格数据的方法
let getStuList = async (param)=>{
    stuLoading.value = true
    try {
        //发起请求
        let res = await api.getStuApi(param)
        console.log(res)
        stuListData.value = res.data.data
        stuLoading.value = false
    } catch (error) {
        console.log(error)
        stuLoading.value = false
    }
}
// 在钩子函数中调用获取学员信息的方法
onMounted(()=>{
    getStuList(fetchTableListParam)
})

</script>

<style scoped>
div{
    margin: 15px 0 0 10px;
}
.el-menu-item{
    font-weight: 800;
}

</style>